
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont">&#x3453;</i>
                    <div class="name">摄影旅行</div>
                    <div class="code">&amp;#x3453;</div>
                    <div class="fontclass">.sheyinglvxing</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe606;</i>
                    <div class="name">上新iocn</div>
                    <div class="code">&amp;#xe606;</div>
                    <div class="fontclass">.shangxiniocn</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe607;</i>
                    <div class="name">上新iocn02</div>
                    <div class="code">&amp;#xe607;</div>
                    <div class="fontclass">.shangxiniocn02</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe608;</i>
                    <div class="name">食iocn</div>
                    <div class="code">&amp;#xe608;</div>
                    <div class="fontclass">.shiiocn</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe609;</i>
                    <div class="name">食iocn02</div>
                    <div class="code">&amp;#xe609;</div>
                    <div class="fontclass">.shiiocn02</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60a;</i>
                    <div class="name">用iocn</div>
                    <div class="code">&amp;#xe60a;</div>
                    <div class="fontclass">.yongiocn</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60b;</i>
                    <div class="name">用iocn02</div>
                    <div class="code">&amp;#xe60b;</div>
                    <div class="fontclass">.yongiocn02</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60c;</i>
                    <div class="name">住iocn</div>
                    <div class="code">&amp;#xe60c;</div>
                    <div class="fontclass">.zhuiocn</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60e;</i>
                    <div class="name">电影票iocn</div>
                    <div class="code">&amp;#xe60e;</div>
                    <div class="fontclass">.dianyingpiaoiocn</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60d;</i>
                    <div class="name">住iocn02</div>
                    <div class="code">&amp;#xe60d;</div>
                    <div class="fontclass">.zhuiocn02</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x34ff;</i>
                    <div class="name">U站</div>
                    <div class="code">&amp;#x34ff;</div>
                    <div class="fontclass">.Uzhan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x34fe;</i>
                    <div class="name">全部</div>
                    <div class="code">&amp;#x34fe;</div>
                    <div class="fontclass">.quanbu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe616;</i>
                    <div class="name">AIS_行列icon</div>
                    <div class="code">&amp;#xe616;</div>
                    <div class="fontclass">.xinglieicon</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe614;</i>
                    <div class="name">金币乐园iocn</div>
                    <div class="code">&amp;#xe614;</div>
                    <div class="fontclass">.jinbileyuaniocn</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe613;</i>
                    <div class="name">钟点工iocn</div>
                    <div class="code">&amp;#xe613;</div>
                    <div class="fontclass">.zhongdiangongiocn</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe612;</i>
                    <div class="name">再领iocn</div>
                    <div class="code">&amp;#xe612;</div>
                    <div class="fontclass">.zailingiocn</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe611;</i>
                    <div class="name">未领iocn</div>
                    <div class="code">&amp;#xe611;</div>
                    <div class="fontclass">.weilingiocn</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe610;</i>
                    <div class="name">红包iocn</div>
                    <div class="code">&amp;#xe610;</div>
                    <div class="fontclass">.hongbaoiocn</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60f;</i>
                    <div class="name">兑换wifiiocn</div>
                    <div class="code">&amp;#xe60f;</div>
                    <div class="fontclass">.duihuanwifiiocn</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3500;</i>
                    <div class="name">文章</div>
                    <div class="code">&amp;#x3500;</div>
                    <div class="fontclass">.wenzhang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3501;</i>
                    <div class="name">店铺</div>
                    <div class="code">&amp;#x3501;</div>
                    <div class="fontclass">.dianpu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3502;</i>
                    <div class="name">图片</div>
                    <div class="code">&amp;#x3502;</div>
                    <div class="fontclass">.tupian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3503;</i>
                    <div class="name">宝贝</div>
                    <div class="code">&amp;#x3503;</div>
                    <div class="fontclass">.baobei</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3432;</i>
                    <div class="name">收藏夹</div>
                    <div class="code">&amp;#x3432;</div>
                    <div class="fontclass">.shoucangjia</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3437;</i>
                    <div class="name">水瓶座</div>
                    <div class="code">&amp;#x3437;</div>
                    <div class="fontclass">.shuipingzuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3438;</i>
                    <div class="name">双鱼座</div>
                    <div class="code">&amp;#x3438;</div>
                    <div class="fontclass">.shuangyuzuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x343a;</i>
                    <div class="name">处女座</div>
                    <div class="code">&amp;#x343a;</div>
                    <div class="fontclass">.chunvzuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3439;</i>
                    <div class="name">摩羯座</div>
                    <div class="code">&amp;#x3439;</div>
                    <div class="fontclass">.mojiezuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x344b;</i>
                    <div class="name">专辑</div>
                    <div class="code">&amp;#x344b;</div>
                    <div class="fontclass">.zhuanji</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3442;</i>
                    <div class="name">牡羊座</div>
                    <div class="code">&amp;#x3442;</div>
                    <div class="fontclass">.muyangzuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3441;</i>
                    <div class="name">金牛座</div>
                    <div class="code">&amp;#x3441;</div>
                    <div class="fontclass">.jinniuzuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3440;</i>
                    <div class="name">双子座</div>
                    <div class="code">&amp;#x3440;</div>
                    <div class="fontclass">.shuangzizuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x343f;</i>
                    <div class="name">天秤座</div>
                    <div class="code">&amp;#x343f;</div>
                    <div class="fontclass">.tianchengzuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x343e;</i>
                    <div class="name">射手座</div>
                    <div class="code">&amp;#x343e;</div>
                    <div class="fontclass">.sheshouzuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x343d;</i>
                    <div class="name">天蝎座</div>
                    <div class="code">&amp;#x343d;</div>
                    <div class="fontclass">.tianhezuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x343c;</i>
                    <div class="name">巨蟹座</div>
                    <div class="code">&amp;#x343c;</div>
                    <div class="fontclass">.juxiezuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x343b;</i>
                    <div class="name">狮子座</div>
                    <div class="code">&amp;#x343b;</div>
                    <div class="fontclass">.shizizuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x344c;</i>
                    <div class="name">瀑布流</div>
                    <div class="code">&amp;#x344c;</div>
                    <div class="fontclass">.pubuliu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x344d;</i>
                    <div class="name">全部</div>
                    <div class="code">&amp;#x344d;</div>
                    <div class="fontclass">.quanbu1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x344e;</i>
                    <div class="name">文章</div>
                    <div class="code">&amp;#x344e;</div>
                    <div class="fontclass">.wenzhang1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x344f;</i>
                    <div class="name">图片</div>
                    <div class="code">&amp;#x344f;</div>
                    <div class="fontclass">.tupian1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3450;</i>
                    <div class="name">宝贝</div>
                    <div class="code">&amp;#x3450;</div>
                    <div class="fontclass">.baobei1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3451;</i>
                    <div class="name">店铺</div>
                    <div class="code">&amp;#x3451;</div>
                    <div class="fontclass">.dianpu1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3452;</i>
                    <div class="name">大杂烩</div>
                    <div class="code">&amp;#x3452;</div>
                    <div class="fontclass">.dazahui</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3454;</i>
                    <div class="name">搞笑趣味</div>
                    <div class="code">&amp;#x3454;</div>
                    <div class="fontclass">.gaoxiaoquwei</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x345d;</i>
                    <div class="name">美容</div>
                    <div class="code">&amp;#x345d;</div>
                    <div class="fontclass">.meirong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x345b;</i>
                    <div class="name">家居</div>
                    <div class="code">&amp;#x345b;</div>
                    <div class="fontclass">.jiaju</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x345a;</i>
                    <div class="name">母婴</div>
                    <div class="code">&amp;#x345a;</div>
                    <div class="fontclass">.muying</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x345c;</i>
                    <div class="name">美发</div>
                    <div class="code">&amp;#x345c;</div>
                    <div class="fontclass">.meifa</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3459;</i>
                    <div class="name">情感</div>
                    <div class="code">&amp;#x3459;</div>
                    <div class="fontclass">.qinggan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3458;</i>
                    <div class="name">美食</div>
                    <div class="code">&amp;#x3458;</div>
                    <div class="fontclass">.meishi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3457;</i>
                    <div class="name">DIY</div>
                    <div class="code">&amp;#x3457;</div>
                    <div class="fontclass">.DIY</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3456;</i>
                    <div class="name">宠物</div>
                    <div class="code">&amp;#x3456;</div>
                    <div class="fontclass">.chongwu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3455;</i>
                    <div class="name">明星</div>
                    <div class="code">&amp;#x3455;</div>
                    <div class="fontclass">.mingxing</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x345f;</i>
                    <div class="name">时尚</div>
                    <div class="code">&amp;#x345f;</div>
                    <div class="fontclass">.shishang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3460;</i>
                    <div class="name">运动户外</div>
                    <div class="code">&amp;#x3460;</div>
                    <div class="fontclass">.yundonghuwai</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x345e;</i>
                    <div class="name">数码</div>
                    <div class="code">&amp;#x345e;</div>
                    <div class="fontclass">.shuma</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3467;</i>
                    <div class="name">上传</div>
                    <div class="code">&amp;#x3467;</div>
                    <div class="fontclass">.shangchuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3461;</i>
                    <div class="name">男装</div>
                    <div class="code">&amp;#x3461;</div>
                    <div class="fontclass">.nanzhuang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3462;</i>
                    <div class="name">配饰</div>
                    <div class="code">&amp;#x3462;</div>
                    <div class="fontclass">.peishi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3463;</i>
                    <div class="name">鞋子</div>
                    <div class="code">&amp;#x3463;</div>
                    <div class="fontclass">.xiezi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3464;</i>
                    <div class="name">包包</div>
                    <div class="code">&amp;#x3464;</div>
                    <div class="fontclass">.baobao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3466;</i>
                    <div class="name">编辑</div>
                    <div class="code">&amp;#x3466;</div>
                    <div class="fontclass">.bianji</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#x3465;</i>
                    <div class="name">女装</div>
                    <div class="code">&amp;#x3465;</div>
                    <div class="fontclass">.nvzhuang</div>
                </li>
            
        </ul>


        <div class="helps">
            第一步：使用font-face声明字体
            <pre>
@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用iconfont的样式
            <pre>
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>
&lt;i class="iconfont"&gt;&amp;#x33;&lt;/i&gt;
</pre>
        </div>

    </div>
</body>
</html>
